/**
 * 非阻塞性更新 状态 useTransition
 * 
 */
import { useState, Suspense } from 'react'
import TabButton from './tabButton';
import AboutTab from './AboutTab';
import PostsTab from './PostsTab';
import ContactTab from './ContactTab';



export default function TabContainer()
{
  // 切换交给 tabButton 控制
  // const [isPending, startTransition] = useTransition()
  const [tab,setTab] = useState('about')

  // function selectTab(nextTab:string) {
  //   startTransition(() => {
  //     setTab(nextTab);
  //   });
  // }

  // function selectTabSlow(nextTab:string) {
  //   setTab(nextTab);
  // }

  return (
    <Suspense fallback={<h1>🌀 Loading...</h1>}>
      <TabButton isActive={ tab === 'about'} onClick={() => setTab('about')} >about</TabButton>
      <TabButton isActive={ tab === 'posts'} onClick={() => setTab('posts')} >posts(slow)</TabButton>
      <TabButton isActive={ tab === 'contact'} onClick={() => setTab('contact')} >contact</TabButton>

      {/* <TabButton isActive={ tab === 'about'} onClick={() => selectTabSlow('about')} >about</TabButton>
      <TabButton isActive={ tab === 'posts'} onClick={() => selectTabSlow('posts')} >posts(slow)</TabButton>
      <TabButton isActive={ tab === 'contact'} onClick={() => selectTabSlow('contact')} >contact</TabButton> */}
      <hr />
      {tab === 'about' && <AboutTab />}
      {tab === 'posts' && <PostsTab />}
      {tab === 'contact' && <ContactTab />}

    </Suspense>
  )
}